<template>
  <div style="width: 100%;height:100%">
    <a-modal
      title="组织架构信息"
      :width="1000"
      v-model="visible"
      @cancel="handleCancel"
      :destroyOnClose="true"
      :keyboard="false"
      :maskClosable="false"
      :closable="true"
      :centered="true"
      :z-index="99"
    >
      <a-form-model
        ref="modalForm"
        :model="formData"
        :rules="uploadRules"
        :label-col="{ span: 5 }" 
        :wrapper-col="{ span: 19 }"
      >
        <a-form-model-item label="请选择组织" prop="">
          <a-tree-select
            v-model="formData.orgId"
            style="width: 100%"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            :tree-data="treeData"
            placeholder="请选择"
            :replaceFields="replaceFields"
            tree-default-expand-all
            @select="selectTree"
            labelInValue
          >
          </a-tree-select>
        </a-form-model-item>
        <p>没有您所在的组织？<a @click="changeEdit">自定义填写</a>（可以选择组织后进一步填写哦~）</p>
        <div :style="{'opacity': editable ? 1: 0.5}">
          <a-form-model-item v-for="(item, index) in formData.sections" :key="index" :label="item.label" prop="">
            <!-- <div class="switchArea">
              <a-switch @change="handleSwitchStatus(item.id)" v-model="item.isEdit"></a-switch>
              手动输入
            </div> -->
            <a-input v-model="item.name" @change="changeInputOrg(index)" :maxLength="50"
                     :readOnly="!editable" :placeholder="item.placeholder?item.placeholder:'请输入'"/>
          </a-form-model-item>
        </div>
      </a-form-model>
      <div slot="footer">
        <a-button @click="handleSave" type="primary">{{ $t('sure') }}</a-button>
        <a-button @click="handleCancel" type="primary" :ghost="true">{{ $t('cancel') }}</a-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
import selectUserTree from '@/views/system/user/components/selectUserTree.vue'

export default {
  components:{
    selectUserTree
  },
  props:{
    orgId:{
      type: String,
      default: ''
    },
    orgName:{
      type: String,
      default: ''
    }
  },
  data(){
    return {
      editable:false,
      visible: false,
      formData:{
        sections:[
          { mid:'0', label: '【一级组织】_事业群', name: undefined },
          { mid:'1', label: '【二级组织】_事业部(院)', name: undefined,parentId:'0' },
          { mid:'2', label: '【三级组织】_中心(部)', name: undefined,parentId:'1' },
          { mid:'3', label: '【四级组织】_部门', name: undefined,parentId:'2' },
          { mid:'4', label: '【五级组织】_科室', name: undefined,parentId:'3' },
          { mid:'5', label: '【六级组织】_组', name: undefined,parentId:'4' },
          { mid:'6', label: '【七级组织】_(备选)', name: undefined, isEdit: true, placeholder:'请按实际情况准确输入七级组织名称',parentId:'5'},
        ],
        orgId:'',
        orgName:'',
      },
      orgTree:{},
      uploadRules:{},
      isEdit:false,
      replaceFields: {
        children: 'childOrganizations',
        title: 'name',
        key: 'id',
        value: 'id'
      },
      treeData:[],
      defaultTitle: '',
      treeT:false,
      allParents:[]
    }
  },
  watch:{
  },
  mounted(){
    this.getTreeData()
  },
  methods:{
    showOrgInfo(){
      if(this.orgId){
        this.formData.orgId={
          label: this.orgName,
          value: this.orgId,
        }
        this.editable=false
        const sectionNameArr=this.formData.orgId.label.split('/')
        this.formData.sections.forEach((item,index)=>{
          item.name=sectionNameArr[index]
        })
      }else if(this.orgName){
        this.editable=true
        this.formData.orgId=undefined
        const sectionNameArr=this.orgName.split('/')
        this.formData.sections.forEach((item,index)=>{
          item.name=sectionNameArr[index]
        })
      }
    },
    changeInputOrg(index){
      for(let i=index+1;i<this.formData.sections.length;i++){
        this.formData.sections[i].name=undefined
      }
      if(index>0){
        if(!this.formData.sections[index-1].name){
          this.$info({
            title: '请逐级录入完整组织架构信息，不可跨级选择录入组织架构信息！',
            onOk() {},
          })
          this.formData.sections[index].name=undefined
        }
      }
    },
    //switch状态改变
    handleSwitchStatus(id) {
      console.log('###',id)
      // this.formData.sections[id].isEdit = !this.formData.sections[id].isEdit
    },
    show(){
      this.visible = true
      this.showOrgInfo()
    },
    handleCancel(){
      this.visible = false
    },
    handleSave(){
      if(this.editable){
        const orgNameArr=[]
        for(let i=0;i<=this.formData.sections.length-1;i++){
          if(this.formData.sections[i].name){
            orgNameArr.push(this.formData.sections[i].name)
          }else{
            break
          }
        }
        const orgName=orgNameArr.join('/')
        this.$emit('saveOrgInfo',undefined,orgName)
      }else{
        this.$emit('saveOrgInfo',this.formData.orgId.value,this.formData.orgId.label)
      }
      this.visible = false
    },
		selectTree(nodeValue){
      this.setTitle(nodeValue.value, this.treeData)
      this.editable=false
      const sectionNameArr=this.defaultTitle.split('/')
      this.formData.sections.forEach((item,index)=>{
        item.name=sectionNameArr[index]
      })
		},
    /**
     * @description 设置当前选中对象
     */
    setTitle(id, treeData) {
      this.treeT = true
      this.getSelectedItem(id, treeData)
      this.$nextTick(() => {
        this.formData.orgId = {
          label: this.defaultTitle,
          value: id,
        }
      })
    },
    /**
    * @description 当前选中对象的title(拼接所有父级title)
    */
    getSelectedItem(id, data, title) {
      for (let item of data) {
        //在根节点找到对应选项
        if (!title && item.id === id && this.treeT) {
          this.treeT = false
          this.defaultTitle = item.name
        }
        //根节点未找到继续递归查找
        else if (!title && item.childOrganizations && this.treeT) {
          this.defaultTitle = item.name
          this.getSelectedItem(id, item.childOrganizations, this.defaultTitle);
        }
        //在子节点找到对应选项
        if (title && item.id === id) {
          this.treeT = false
          this.defaultTitle = title + '/' + item.name
        }
        //当前子节点未找到继续递归向下查找
        else if (title && item.childOrganizations && this.treeT) {
          this.defaultTitle = title + '/' + item.name
          this.getSelectedItem(id, item.childOrganizations, this.defaultTitle);
        }
      }
    },
    changeEdit(data){
      this.editable=true
      this.formData.orgId=undefined
    },
    getTreeData(){
      this.$api.getOrgAllData().then(res=>{
        this.handleTreeData(res.data)
        this.treeData=res.data
      })
    },
    handleTreeData (data) {
      data.forEach(item => {
        if (typeof item.parentId === 'undefined') {
          item.slots = {
            icon: 'firm'
          }
        } else if (item.childOrganizations.length > 0) {
          item.slots = {
            icon: 'bumen1'
          }
        } else {
          item.slots = {
            icon: 'bumen'
          }
        }
        item.childOrganizations.length && this.handleTreeData(item.childOrganizations)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.ant-form {
  margin: 4px 0 0 0;
}
.ant-form-item {
  .switchArea {
    position: absolute;
    right: 0;
    top: -44px;
    .ant-switch {
      margin: 0;
    }
  }
}
</style>